import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

import "./assets/style.scss"
import "./assets/common.less"
import { RouterProvider } from 'react-router-dom';
import router from './router';
import { Provider } from 'react-redux'
import { store } from './store';
import Mask from './components/Mask';
import Loading from './components/Loading';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Provider store={store}>
    {/* 该组件搭配lazy函数实现懒加载  , 结合 fallback 属性 ，用来占位*/}
    <Suspense fallback={<Mask><Loading /></Mask>}>
      <RouterProvider router={router} />
    </Suspense>
  </Provider>
);
